<template>
	<view :class="['ff-loading', isFull?'ff-loading-full':'']">
		<slot name="ff-loading-body" v-if="show">
			<view v-if="activeMode == 'chrysanthemum'" class="ff-loading-mode-item ff-loading-mode-chrysanthemum">
				<view class="ff-loading-mask" :style="{'background-color':maskColor, 'z-index':zIndex, 'color': color}">
					<slot name="ff-loading-icon">
						<view class="ff-loading-icon">
							<ff-icon name="load-full" size="25" color="rgb(255 255 255)" />
						</view>
					</slot>
				</view>
			</view>
			<view v-else-if="activeMode == 'circle'" class="ff-loading-mode-item ff-loading-mode-circle">
				<view class="ff-loading-mask" :style="{'background-color':maskColor, 'z-index':zIndex, 'color': color}">
					<slot name="ff-loading-icon">
						<view class="ff-loading-icon">
							<ff-icon name="loading1" size="25" color="rgb(255 255 255)" />
						</view>
					</slot>
				</view>
			</view>
			<view v-else-if="activeMode == 'success'" class="ff-loading-mode-item ff-loading-mode-success">
				<view class="ff-loading-mask" :style="{'background-color':maskColor, 'z-index':zIndex, 'color': color}">
					<slot name="ff-loading-icon">
						<view class="ff-loading-icon">
							success
							<ff-icon name="loading1" size="25" color="rgb(255 255 255)" />
						</view>
					</slot>
				</view>
			</view>
			<view v-else-if="activeMode == 'error'" class="ff-loading-mode-item ff-loading-mode-error">
				<view class="ff-loading-mask" :style="{'background-color':maskColor, 'z-index':zIndex, 'color': color}">
					<slot name="ff-loading-icon">
						<view class="ff-loading-icon">
							<ff-icon name="shibai1" size="40" color="rgb(255 76 76)" />
							{{msg}}
						</view>
					</slot>
				</view>
			</view>
			<view v-else class="ff-loading-mode-item ff-loading-mode-gear">
				<view class="ff-loading-mask" :style="{'background-color':maskColor, 'z-index':zIndex, 'color': color }">
					<slot name="ff-loading-icon">
						<view class="ff-loading-icon">
							<ff-icon name="jiazai4" size="25" color="rgb(255 255 255)" />
						</view>
					</slot>
				</view>
			</view>
		</slot>
		<slot name="default"></slot>
	</view>
</template>

<script>
	export default {
		name: "ff-loading",
		components: {},
		props: {
			maskColor: {
				type: String,
				default: 'hsl(0deg 0% 0% / 45%)'
			},
			color: {
				type: String,
				default: '#ffffff'
			},
			zIndex: {
				type: Number,
				default: 2000
			},
			isFull: {
				type: Boolean,
				default: false,
			}
		},
		computed: {

		},
		data() {
			return {
				show: false,
				activeMode: null,
				msg: null,
			};
		},
		mounted() {

		},
		methods: {
			isShow() {
				return this.show;
			},
			open(msg = null) {
				this.activeMode = 'gear';
				this.show = true;
				this.msg = msg;
			},
			close() {
				this.show = false;
				this.msg = null;
				this.activeMode = null;
			},
			success(msg = null, code = 200, outTime = null) {
				this.activeMode = 'success';
				this.show = true;
				this.msg = msg;
				if (outTime != null) {
					setTimeout(() => {
						this.close()
					}, outTime)
				}
			},
			error(msg = "请求失败", code = 500, outTime = null) {
				this.activeMode = 'error';
				this.show = true;
				this.msg = msg;
				if (outTime != null) {
					setTimeout(() => {
						this.close()
					}, outTime)
				}
			}
		}
	}
</script>

<style scoped>
	ff-loading {
		overflow: hidden;
	}

	.ff-loading {
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		flex: 1;
		width: initial;
		font-size: 14px;
		min-height: 50px;
	}

	.ff-loading-full > .ff-loading-mode-item > .ff-loading-mask {
		position: fixed;
		top: 0px;
		left: 0px;
		height: 100vh;
		width: 100vw;
	}

	.ff-loading-mask {
		position: absolute;
		margin: 0;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		align-content: center;
		justify-content: center;
		align-items: center;
	}

	.ff-loading-mode-gear .ff-loading-icon {
		animation: iconRotateAnimation 3s linear infinite;
	}

	.ff-loading-mode-circle .ff-loading-icon {
		animation: iconRotateAnimation 2s linear infinite;
	}

	.ff-loading-mode-chrysanthemum .ff-loading-icon {
		animation: iconZRotateAnimation 2s linear infinite;
	}

	@keyframes iconRotateAnimation {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	@keyframes iconZRotateAnimation {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(-360deg);
		}
	}

	.ff-loading-mode-error .ff-loading-icon {
		display: flex;
		align-content: center;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		height: 70px;
	}
</style>